<template>
  <div ref="branchs">
    <a-steps v-if="data">
      <a-step :title="$t('all.autotext1284')" />
      <a-step
        v-for="item in nodeList"
        :key="item.id"
        :title="item.roleName"
        status="process"
      />
    </a-steps>
    <div class="tip-wrap" v-if="Object.keys(branch).length">
      <div
        class="tip"
        v-for="(item, index) in branch"
        :key="index"
        :style="{left: item[0].pos}"
      >
        <a-timeline>
          <a-timeline-item v-for="(k, i) in item" :key="i">
            {{ $t('all.autotext1507') }}：<span class="em">{{ k.applyType }}</span>{{ $t('all.autotext916') }}：<span class="em">{{ k.roleName }}</span>
            <span class="user-code" v-if="k.userCode">({{ k.userCode }})</span>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserNoByIds } from '@/api/account/user'

export default {
  props: ['data'],
  data () {
    return {
      branch: {},
      codeMap: [],
      nodeList: [],
      current: 0 // 步骤条默认在0
    }
  },
  watch: {
    data: {
      immediate: true,
      async handler (val) {
        if (!val) return
        const userIds = []
        const valCopy = JSON.parse(JSON.stringify(val))
        for (const re of valCopy) {
          if (re.processorId) {
            userIds.push(...re.processorId.split(','))
          }
        }
        if (userIds.length) {
          this.codeMap = await getUserNoByIds({ ids: userIds.toString(), proId: val[0].proId })
          valCopy.forEach(v => {
            if (v.processorId) {
              v.userCode = this.getUserCode(v.processorId)
            }
          })
        }
        this.$nextTick(() => {
          this.getBranch(valCopy)
        })
        const nodeList = valCopy.filter(v => !v.parentCode && v.nodeType === 3)
        this.nodeList = nodeList
      }
    }
  },
  methods: {
    getUserCode (ids) {
      if (!ids) return ''
      const that = this
      return ids.split(',').map(v => {
        const c = that.codeMap.find(code => code.id === +v)
        return c.userNo
      }).toString()
    },
    getBranch (data) {
      const branchs = this.$refs.branchs
      const tailWidth = 72 // 最后一个节点的宽度

      const arr = {}
      let mainNodeCount = 0
      const mainList = data.filter(v => !v.parentCode && v.nodeType === 3)
      const stepLen = (branchs.clientWidth - tailWidth) / mainList.length
      data.forEach(v => {
        if (v.parentCode) {
          if (!arr[v.parentCode]) arr[v.parentCode] = []
          arr[v.parentCode].push({
            pos: (stepLen * mainNodeCount + stepLen * 0.4) / branchs.clientWidth * 100 + '%',
            userCode: this.getUserCode(v.processorId),
            ...v
          })
        } else if (v.nodeType === 3) {
          mainNodeCount++
        }
      })
      this.branch = arr
    }
  }
}

</script>
<style scoped lang="less">
.tip-wrap {
  position: relative;
  width: 100%;
  min-height: 100px;
}
.tip {
  top: 30px;
  padding: 2px 4px;
  position: absolute;

  &:before {
    content: '';
    display: block;
    border-left: 2px solid #e8e8e8;
    width: 0;
    height: 45px;
    position: absolute;
    left: 8px;
    top: -45px;
  }
}
.em {
  color: #007FDF;
}
.user-code {
  color: #e04b28;
}
</style>
